<!DOCTYPE html>
<html lang="en">

<head>
    <title>Measure</title>
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
    <style>
        .map {
            width: 100%;
            height: 400px;
        }
        
        .ol-tooltip {
            position: relative;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 4px;
            color: white;
            padding: 4px 8px;
            opacity: 0.7;
            white-space: nowrap;
            font-size: 12px;
        }
        
        .ol-tooltip-measure {
            opacity: 1;
            font-weight: bold;
        }
        
        .ol-tooltip-static {
            background-color: #ffcc33;
            color: black;
            border: 1px solid white;
        }
        
        .ol-tooltip-measure:before,
        .ol-tooltip-static:before {
            border-top: 6px solid rgba(0, 0, 0, 0.5);
            border-right: 6px solid transparent;
            border-left: 6px solid transparent;
            content: "";
            position: absolute;
            bottom: -6px;
            margin-left: -7px;
            left: 50%;
        }
        
        .ol-tooltip-static:before {
            border-top-color: #ffcc33;
        }
        
        .ol-tooltip-btn {
            display: inline-block;
            padding: 2px;
            border: 1px solid #eee;
            background: white;
            border-radius: 4px;
            color: #000;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="map" class="map"></div>
    <form class="form-inline">
        <label>Measurement type &nbsp;</label>
        <select id="type">
            <option value="circle">circle (Polygon)</option>
            <option value="length">Length (LineString)</option>
            <option value="polygon">Area (Polygon)</option>
            <option value="rectangle">rectangle (Polygon)</option>
      </select>
    </form>
    <script src="./index.js"></script>
</body>

</html>